<template>
	<div>
	<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
	<div style="padding: 20px;">
		<transition name="custom-classes-transition" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp" >
			<addyearsegment 
				:importgradeid="gradeselect"
				:importgradelist="gradelist"
				v-on:chance="chance" v-if="show" style="margin-bottom: 20px;"><span>添加年段长</span></addyearsegment>
		</transition>
		<Row >
	        <Col span="18" style="text-align: left;margin-top:15px;">
	        	<span>年段筛选：</span>
	        	<RadioGroup  v-model="gradeselect" type="button" @on-change="changeselect">
	        		<Radio v-for="item in gradelist" :key="item.value" :label="item.value">{{item.label}}</Radio>
			    </RadioGroup>
			    <Spin size="large" fix v-if="gradelistshow"></Spin>
	        </Col>
	    </Row>
	    
	    <Row>
	    	<Col span="12" style="text-align: left;margin-top:15px;">
	        	<span style="font-size: 20px;">年段长列表：</span>
	        </Col>
	        <Col span="12" style="text-align: right;margin-top:15px;font-size: 16px;">
	        	<Button  @click="addyearsegment" type="success" size="small"><i class="iconfont alicon-add1"></i></Button>
	        	<Button @click="delyearsegment" type="error" size="small"><i class="iconfont alicon-delete"></i></Button>
	        </Col> 
	        
	    </Row>
	    <div style="position: relative;">
		    <Table style="margin-top: 10px;" border ref="selection" :columns="columns4" :data="data1" @on-selection-change="yearsegmentselect"></Table>
	        <Spin size="large" fix v-if="yearsegmentlistshow"></Spin>
	    </div>
	</div>
	</div>
</template>

<script>
	import api from "@/components/js/Apidomain.js"
	import addyearsegment from "@/components/performance/basicsetting/Addyearsegment"
	export default{
		data(){
			return{
				gradelistshow:false,		//控制年级选择条的加载中显示隐藏
				show:false,					//控制添加年段长的面板显示跟隐藏
				yearsegmentlistshow:false,	//年段长列表的加载中显示隐藏
				
				selections:"",				//表格勾选集合
				gradeselect:"",				//选择的科目
				gradelist: [
//					{value: '1',label: '初一'},
//					{value: '2',label: '初二'},
//                  {value: '3',label: '初三'}, 
//                  {value: '4',label: '高一'},
//					{value: '5',label: '高二'},
//                  {value: '6',label: '高三'}, 
                ],
                columns4: [
                    {type: 'selection',width: 60,align: 'center'},
                    {title: '工号',key: 'teacherNo',align: 'center',},
                    {title: '姓名',key: 'teacherName',align: 'center',},
                    {title: '年段',key: 'grade',align: 'center',},
                    {title: '职称',key: 'jobTitle',align: 'center',},
                    
                ],
                data1: [
//                  {id:"4444",teacherNo:"122672013040",teacherName: '张三',grade: '高一',jobTitle:'正年段长'},
//                  {id:"4234",teacherNo:"122672013040",teacherName: '李四',grade: '高一',jobTitle:'副年段长'},
                ]
			}
		},
		components:{
			addyearsegment,
		},
		created(){
			this.getgradelist();
		},
		methods:{
			changeselect:function(){
				this.getyearsegmentlist();
			},
			yearsegmentselect:function(selection){
           		this.selections = selection
//         		//console.log(this.selections)
           	},
           	addyearsegment:function(){
           		this.show = true;
           	},
           	chance:function(){
           		this.show = false;
           		this.getyearsegmentlist();
           	},
           	//获取年级选择列表
           	getgradelist:function(){
           		this.gradelistshow = true;
           		var self = this;
            	let url = api.apidomain+'/tqes/web/tchStudent/getTchGradeSelect';
            	this.$http.post(url, {}).then(function(response) {
					if(response.data.success == true){
						
//						////console.log(response.data.data)
						self.gradelist = response.data.data
						
						//第一次页面进来加载第一项
						if(self.gradelist.length != 0){
							self.gradeselect = self.gradelist[0].value;
							self.getyearsegmentlist();
						}
						
						self.gradelistshow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
		            		self.gradelistshow = false;
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00076',
							duration: 10,
							closable: true
						});
						self.gradelistshow = false;
					});
           	},
           	//根据年级获取年段长列表
           	getyearsegmentlist:function(){
//         		this.gradelistshow = true;
           		var self = this;
            	let url = api.apidomain+'/tqes/web/tchTeacher/getGradeLeaderInfoList';
            	this.$http.post(url, {gradeId:this.gradeselect}).then(function(response) {
					if(response.data.success == true){
						
//						////console.log(response.data.data)
						self.data1 = response.data.data
//						self.gradelistshow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            		self.gradelistshow = false;
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00077',
							duration: 10,
							closable: true
						});
//						self.gradelistshow = false;
					});
           	},
           	delyearsegment:function(){
           		let delallid = [];
           		for(let key in this.selections){
           			delallid.push(this.selections[key].id)
           		}
           		if(delallid.length == 0){
           			this.$Message.error({
								content: '请勾选再删除',
								duration: 10,
								closable: true
							});
           			return;
           		}
           		
           		this.$Modal.confirm({
                    title: '确定删除',
                    content: '<p>确定删除这些学生信息吗</p>',
                    onOk: () => {
		               this.yearsegmentlistshow = true;
		           		var self = this;
		            	let url = api.apidomain+'/tqes/web/tchTeacher/batchDeleteGradeLeader';
		            	this.$http.post(url, {'ids':delallid}).then(function(response) {
							if(response.data.success == true){
								self.$Message.success({
				                    content: '删除成功',
				                    duration: 10,
				                    closable: true
		               			})
		//						////console.log(response.data.data)
								self.yearsegmentlistshow = false;
								self.getyearsegmentlist();
								self.selections = [];
				            }else if(response.data.success == false){
				            		self.$Message.error({
										content: response.data.msg,
										duration: 10,
										closable: true
									});
				            		self.yearsegmentlistshow = false;
				            	}
							})
							.catch(function(error) {
								self.$Message.error({
									content: '系统发生错误：错误码00078',
									duration: 10,
									closable: true
								});
								self.yearsegmentlistshow = false;
							}); 
		                
                    },
                    onCancel: () => {
//                      this.$Message.info('Clicked cancel');
                    }
                });	
           	},
		}
	}
</script>

<style>
</style>